<template>
  <!-- 新建文章页面 -->
  <div class="editor-page">
    <h1>新建文章</h1>
    <!-- 文章标题输入框 -->
    <input v-model="title" placeholder="请输入文章标题" class="title-input" />
    <!-- 作者输入框 -->
    <input v-model="author" placeholder="请输入作者" class="author-input" />
    <!-- 标签输入框，回车添加标签 -->
    <input v-model="tagInput" placeholder="输入标签并回车" @keyup.enter="addTag" class="tag-input" />
    <!-- 已添加的标签列表 -->
    <div class="tag-list">
      <span v-for="tag in tags" :key="tag" class="tag">{{ tag }}</span>
    </div>
    <!-- 富文本编辑器组件，编辑文章内容 -->
    <RichEditor v-model="content" @submit="submitArticle" />
  </div>
</template>

<script setup>
// 引入 Vue 的 Composition API
import { ref } from 'vue'
// 引入富文本编辑器组件
import RichEditor from '../components/RichEditor.vue'
// 引入路由，用于页面跳转
import { useRouter } from 'vue-router'
// 引入 Pinia 博客 store
import { useBlogStore } from '../stores/blog'

// 文章标题
const title = ref('')
// 作者
const author = ref('')
// 标签输入框内容
const tagInput = ref('')
// 已添加的标签数组
const tags = ref([])
// 文章内容
const content = ref('')
// 获取路由实例
const router = useRouter()
// 获取博客 store 实例
const blog = useBlogStore()

// 添加标签方法，回车时触发
function addTag() {
  if (tagInput.value && !tags.value.includes(tagInput.value)) {
    tags.value.push(tagInput.value)
  }
  tagInput.value = ''
}

// 提交文章方法
function submitArticle() {
  // 校验必填项
  if (!title.value || !author.value || !content.value) {
    alert('请填写完整信息')
    return
  }
  // 调用 store 方法新增文章
  blog.addArticle({
    title: title.value,
    author: author.value,
    tags: [...tags.value],
    summary: content.value.slice(0, 30) + '...', // 取前30字作为摘要
    content: content.value
  })
  // 跳转回文章列表页
  router.push('/articles')
}
</script>

<style scoped>
/* 新建文章页面样式，居中卡片风格 */
.editor-page {
  max-width: 800px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px #e3e3e3;
  padding: 32px;
}
.title-input, .author-input, .tag-input {
  width: 100%;
  margin-bottom: 12px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #dcdfe6;
  border-radius: 6px;
}
.tag-list {
  margin-bottom: 12px;
}
.tag {
  background: #e3f0ff;
  color: #409eff;
  border-radius: 4px;
  padding: 2px 8px;
  margin-right: 4px;
  font-size: 12px;
}
</style> 